<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02-vue的模板语法</title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="count">{{count}}</div>
			<div class="text" v-text="html"></div>
			<div class="html" v-html="html"></div>
			<div class="title" v-bind:title="title">绑定属性测试</div>
			<input type="text" :disabled="isDisabled" />
			<div class="bind_event" v-on:click="myClickEvent()">点击事件</div>
			<div class="bind_event" @click="myClickEvent()">简写点击事件</div>
			<input type="text" v-model="age" placeholder="请输入年龄"/>
			<button @click="updateAge()">年龄递增</button>
			<div class="name" v-if="num == 1">张三</div>
			<div class="name" v-else-if="num == 2">李四</div>
			<div class="name" v-else>王五</div>
			<div class="goods_item" v-for="(val,index) in goods" :key="index" :index="index" @click="increse(index)">
				<div class="title" style="display: inline-block;">{{val.title}}</div>
				<div class="price" style="display: inline-block;">&nbsp;&nbsp;单价{{val.price}}</div>
				<div class="chooseNum" style="display: inline-block;">&nbsp;&nbsp;数量{{val.chooseNum}}</div>
			</div>
			<table border="1px" style="text-align: center;">
				<tr>
					<th>商品名称</th>
					<th>价格</th>
					<th>数量</th>
					<th>总价</th>
					<th>操作</th>
				</tr>
				<tr v-for="(val,index) in goods" :key="index">
					<td>{{val.title}}</td>
					<td>{{val.price}}</td>
					<td>{{val.chooseNum}}</td>
					<td>{{computAllPrice()}}</td>
					<td>
						<button @click="increse(index)">增加</button>
						<button @click="decrese(index)">减少</button>
					</td>
				</tr>
				<tr>
					<td colspan="4">应支付金额：</td>
					<td>{{payPrice()}}元</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script type="text/javascript">
	// 解构
	const {createApp} = Vue;
	// 创造实例
	const app = createApp({
		// 管理的数据
		data(){
			return{
				// 1.差值语法：{{}}
				count:10,
				// 2.指令
				// 2.1：v-text:文本渲染
				// 2.2：v-html:类似于innerHTML，会识别HTML标签
				html:"<strong>加粗标签</strong>",
				// 2.3：v-bind:绑定属性，简写为：
				title:"这是一条标题信息",
				isDisabled:true,
				// 2.4：v-on:绑定监听事件，简写为：@
				// 2.5：v-model:数据的双向绑定
				age:18,
				// 2.6：v-if/v-else-if/v-else
				num:3,
				// 2.7：v-for:循环
				goods:[
					{title:'一只酸奶牛',price:'10',chooseNum:0},
					{title:'娃哈哈啤酒',price:'8',chooseNum:0}
				],
				// 3.计算器computed
				// 4.侦听器watch
			}
		},
		methods:{
			myClickEvent(){
				alert("点击事件");
			},
			updateAge(){
				this.age++;
			},
			increse(index){
				this.goods[index].chooseNum++;
			},
			decrese(index){
				if(this.goods[index].chooseNum <= 0){
					return;
				}
				this.goods[index].chooseNum--;
			}
		},
		// 计算器（属性）
		computed:{
			computAllPrice(){
				return this.goods.map(val =>{
					const allPrice = val.chooseNum * val.price;
					return {
						...val,
						allPrice 
					}
				})
			},
			payPrice(){
				let sumPrice = 0;
				this.computAllPrice.forEach(val =>{
					sumPrice += val.allPrice;
				})
				return sumPrice;
			}
		},
		// 侦听器
		watch:{
			age(newAge,oldAge){
				console.log(`变化之前${oldAge}`);
				console.log(`变化之后${newAge}`);
			}
		},
		beforeCreate(){
			
		},
		created() {
			
		},
		beforeMount() {
			
		},
		mounted() {
			// 第一种方法有问题
			// setInterval(() =>{
			// 	this.count++;
			// },1000);
			const _that = this;
			setInterval(function(){
				_that.count++;
			},1000);
		},
		beforeUpdate() {
			
		},
		updated() {
			
		},
		beforeUnmount() {
			
		},
		unmounted() {
			
		}
	});
	// 挂载模板
	const vm = app.mount("#app");
</script>